<template>
    <div class="app-container invoices-container">
        <el-tabs v-model="active" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="未记账" :name="1" />
            <el-tab-pane label="已记账" :name="2" />
            <el-tab-pane label="发生额及余额表" :name="3" />
        </el-tabs>
        <component :is="components[active]" @slipUrl="slipUrl"></component>
    </div>
</template>

<script setup>
import { ref } from "vue";
import Unbilled from "./components/Unbilled.vue";
import Booked from "./components/Booked.vue";
import Balance from "./components/Balance.vue";

const components = {
    1: Unbilled,
    2: Booked,
    3: Balance,
}
const active = ref(1);
/**
 * 新开页面并跳转收支流水
 */
 const toPayment=(query)=>{
    const routeInfo = router.resolve({
            path:'/finance/payments',
            query
        });
        const url = routeInfo.href;
        window.open(url, '_blank')
}
</script>

<style lang="scss" scoped>
.invoices-container {
    ::v-deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }

    ::v-deep(.el-tabs__item.is-active) {
        color: $topic;
    }

    ::v-deep(.el-tabs__active-bar) {
        background: $topic;
    }

    ::v-deep(.el-tabs__item:hover) {
        color: $topic;
    }
}
</style>